<style>
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
<template>
  <div>
    <Card class="mb-10">
      <Row>
        <Col span="12">
          <h3>订单管理</h3>
        </Col>
        <Col span="12" class="text-right">
          <component2 v-if="Super">
            <Button type="primary" @click="addimes" class="mr-10">新建</Button>
          </component2>
          <component2 v-if="Super">
            <Button type="error" @click="myDelete">删除</Button>
          </component2>
        </Col>
      </Row>
    </Card>
    <Card>
      <Row style="margin-bottom: 10px;">
        <span>日期范围：</span>
        <DatePicker
          style="width:160px"
          type="date"
          format="yyyy-MM-dd"
          :value="startTime"
          @on-change="myStartTime"
          placeholder="开始日期"
        ></DatePicker>
        <span>~</span>
        <DatePicker
          style="width:160px;margin-right:20px;"
          type="date"
          format="yyyy-MM-dd"
          :value="endTime"
          @on-change="myEndTime"
          placeholder="结束日期"
        ></DatePicker>
        <span>关键字：</span>
        <Input
          placeholder="请输入姓名/手机号"
          v-model.trim="searchText"
          style="width:200px;margin-right:20px;"
        ></Input>
        <Button type="primary" @click="search">搜索</Button>
      </Row>
      <Table
        size="large"
        @on-selection-change="selectOption"
        stripe
        ref="selection"
        :columns="tableCol"
        :data="tableData"
      ></Table>
      <Page
        class="mt-10 text-right"
        :total="total"
        :current="currentPage"
        :page-size="pageSize"
        @on-change="changePage"
        @on-page-size-change="changeSize"
        show-sizer
        show-total
      />
    </Card>
    <Modal v-model="saveItem" :title="itemTitle" @on-cancel="closeSaveItem">
      <Form ref="formData" :model="formData" :label-width="80">
        <input type="hidden" name="id" v-model="formData.id">
        <input type="hidden" name="createTime" :value="createTime">
        <FormItem label="姓名">
          <Input v-model="formData.name" placeholder="请填写您的姓名" :maxlength="10"></Input>
        </FormItem>
        <span style="color: red;margin-left: 80px;font-size:5px">*手机号为您的登录账号*</span>
        <FormItem label="手机号">
          <Input v-model="formData.phone" placeholder="请填写您的手机号码" :maxlength="11"></Input>
        </FormItem>
        <FormItem label="留言">
          <Input type="text" v-model="formData.remark" placeholder="对此次订单进行备注"></Input>
        </FormItem>
        <FormItem label="订单状态">
          <Input type="text" v-model="formData.orderType" placeholder="当前订单状态"></Input>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button type="default" @click="closeSaveItem">关闭</Button>
        <Button type="primary" :disabled="saveItemStatu" @click="saveItemOk">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { hasOneOf } from "@/libs/tools";
import {
  getAllOrder,  
  commentDel,
  addOrder,
  searchOrder,
  updateOrder
} from "@/api/data";
export default {
  data() {
    return {
      startTime: "", // 日期初始化
      endTime: "", // 日期初始化
      searchText: "", // 搜索内容初始化

      pageSize: 10, //每页显示条数
      currentPage: 1, //当前页码
      total: 0, //数据总数
      order: "", //订单编号
      formData: {}, //表单信息
      addUser: true, //是否为新增用户
      saveItem: false, //保存操作框
      saveItemStatu: false, //保存点击状态
      itemTitle: "新建订单", //保存操作框title
      selectItemArr: [], // 选中项目id
      createTime: Date.parse(new Date()),
      tableCol: [
        //表头名称
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "ID",
          key: "id"
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "手机号",
          key: "phone"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "备注",
          key: "remark"
        },
        {
          title: "订单状态",
          key: "orderType"
        },
        {
          width: 100,
          title: "操作",
          key: "examineStatus",
          checkAccess: ["superAdmin"],
          render: (h, params) => {
            console.log();
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "large",
                    disabled: this.viewAccessTeacher
                  },
                  on: {
                    click: () => {
                      this.itemTitle = "编辑订单";
                      this.addUser = false;
                      this.saveItem = true;
                      let getData = JSON.parse(
                        JSON.stringify(this.tableData[params.index])
                      );
                      this.formData = getData;                      
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      tableData: [], //表单数据数组
      imgName: "",
      picShow: false,
      uploadList: [],
      cityList: [],
      coursesList: [],
      targetKeys: [],
      listStyle: {
        width: "150px",
        height: "200px"
      }
    };
  },
  methods: {
    async pageInit() {
      getAllOrder(
        this.pageSize,
        this.currentPage,
        this.startTime,
        this.endTime,
        this.searchText
      ).then(res => {
        if (res.data.success) {
          this.total = res.data.result.data.totalSize;
          this.tableData = res.data.result.data.pageList;
        } else if (res.data.errorMsg) {
          this.$Message.warning({
            content: res.data.errorMsg
          });
        }
      });
    },
    changePage(page) {
      this.currentPage = page;
      this.pageInit();
    },
    changeSize(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.pageInit();
    },
    //添加订单
    addimes() {
      this.formData = {};
      this.itemTitle = "添加订单";
      this.addUser = true;
      this.saveItem = true;
      this.createTime = Date.parse(new Date());
    },
    // 关闭保存项目模态框
    closeSaveItem() {
      this.formData = {};
      this.saveItem = false;
      //this.targetKeys = [];
    },
    //点击弹出确定
    saveItemOk() {
      var that = this;
      var formData = this.formData;
      //console.log(JSON.stringify(formData))
      if (!formData.name) {
        this.$Message.warning({
          content: "请填写您的姓名！"
        });
        return;
      } else if (!/[\u4e00-\u9fa5_a-zA-Z]+$/.test(formData.name)) {
        this.$Message.warning({
          content: "请填写正确的姓名"
        });
        return;
      }
      if (!formData.phone) {
        this.$Message.warning({
          content: "请填写您的手机号"
        });
        return;
      } else if (!/^1(3|4|5|6|7|8)\d{9}$/.test(formData.phone)) {
        this.$Message.warning({
          content: "请填写正确的手机号"
        });
        return;
      }
      if (!formData.orderType) {
        this.$Message.warning({
          content: "请确认订单状态！"
        });
        return;
      } else if (this.addUser) {
        addOrder(this.formData, this.createTime).then(res => {
          // console.log(JSON.stringify(res))
          if (res.data.result && res.data.result.error) {
            this.$Message.warning({
              content: res.data.result.error
            });
            return;
          } else if (res.data.success) {
            this.$Message.success({
              content: "添加订单成功"
            });
            that.saveItem = false;
            that.pageInit();
          } else if (res.data.errorMsg) {
            this.$Message.warning({
              content: res.data.errorMsg
            });
          }
          that.saveItemStatu = false;
        });
      } else {
        this.saveItemStatu = true;
        updateOrder(this.formData).then(res => {
          var that = this;
          that.saveItemStatu = false;
          if (res.data.success) {
            this.$Message.success({
              content: "修改订单成功"  
            });           
            that.saveItem = false;
            that.pageInit();
          } else if (res.data.errorMsg) {
            this.$Message.warning({
              content: res.data.errorMsg
            });
          }
        });
      }
    },
    // 选中项
    selectOption(selection, row) {
      this.selectItemArr = [];
      for (let item of selection) {
        this.selectItemArr.push(item.id);
      }
    },
    // 删除
    myDelete() {
      var selectItemArr = this.selectItemArr;
      if (selectItemArr.length < 1) {
        this.$Message.warning({
          content: "请选择项目！"
        });
        return;
      } else {
        commentDel("/order/delOrderById", selectItemArr).then(res => {
          console.log(JSON.stringify(res));
          if (res.data.success) {
            this.selectItemArr = [];
            this.pageInit();
            this.$Message.success({
              content: "删除成功！"
            });
          } else if (res.data.errorMsg) {
            this.$Message.warning({
              content: res.data.errorMsg
            });
          }
        });
      }
    },
    // 开始日期
    myStartTime(newTime) {
      this.startTime = newTime;
    },
    // 结束日期
    myEndTime(newTime) {
      this.endTime = newTime;
    },
    // 搜索
    search() {
      this.currentPage = 1;
      this.pageInit();
    },
    handleChange(newTargetKeys) {
      this.targetKeys = newTargetKeys;
    },
    render(item) {
      return item.label;
    },
    reloadMockData() {
      this.transfer = this.getMockData();
      this.targetKeys = this.getTargetKeys();
    }    
  },
  mounted() {
    // 初始化
    getAllOrder(10, 1).then(res => {
      console.log("----" + JSON.stringify(res));
      if (res.data.success) {
        
        this.tableData = res.data.result.data.pageList;
        this.total = res.data.result.data.totalSize; //数据总条数
        var createtime = [];
        for (var i = 0; i < this.tableData.length; i++) {
          createtime.push(this.tableData[i].createTime);
        }
        console.log(createtime);
        for (var j = 0; j < createtime.length; j++) {
          var date = new Date(createtime[j]);

          Date.prototype.Format = function(fmt) {
            //author:wangweizhen
            var o = {
              "M+": this.getMonth() + 1, //月份
              "d+": this.getDate(), //日
              "h+": this.getHours(), //小时
              "m+": this.getMinutes(), //分
              "s+": this.getSeconds(), //秒
              "q+": Math.floor((this.getMonth() + 3) / 3), //季度
              S: this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt))
              fmt = fmt.replace(
                RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length)
              );
            for (var k in o)
              if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(
                  RegExp.$1,
                  RegExp.$1.length == 1
                    ? o[k]
                    : ("00" + o[k]).substr(("" + o[k]).length)
                );
            return fmt;
          };
          // console.log(date);
          var newDate = date.Format("yyyy-MM-dd hh:mm:ss");

          this.tableData[j].createTime = newDate;
        }
      } else if (res.data.errorMsg) {
        this.$Message.warning({
          content: res.data.errorMsg
        });
      }
    });
  },
  computed: {
    access() {
      return this.$store.state.user.access;
    },
    //所有权限
    viewAccessAll() {
      return hasOneOf(["superAdmin", "teacher", "student"], this.access);
    },
    //部分权限
    viewAccessTeacher() {
      return hasOneOf(["teacher", "student"], this.access);
    },
    Super() {
      return hasOneOf(["superAdmin"], this.access);
    }
  }
};
</script>
